<template>
  <div>
    <!-- 中间文章列表 -->
    <ArticleList
      v-if="articleList.length"
      :isHaveBtns="true"
      :articleList="articleList"
      type="edit"
      @getArticleList="getUserArticleList"
    />
    <div class="content flex-center" v-else>暂无文章</div>

    <!-- 分页 -->
    <el-pagination
      v-if="pagination.totalPages > 1"
      background
      @current-change="handleCurrentChange"
      layout="prev, pager, next"
      class="pagination"
      :total="pagination.total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { getArticleList } from '@/api/article'
export default {
  name: 'Article-List',
  data() {
    return {
      articleList: [],
      pagination: {
        pageNumber: 1,
        pageSize: 10,
        total: 0,
        totalPages: 0
      }
    }
  },
  created() {
    this.getUserArticleList()
  },
  computed: {
    getUserId() {
      return this.$route.params.id
    }
  },
  methods: {
    // 获取文章列表
    async getUserArticleList() {
      try {
        const params = {
          userId: this.getUserId,
          pageNumber: this.pagination.pageNumber,
          pageSize: this.pagination.pageSize
        }
        const res = await getArticleList(params)
        this.articleList = res.data.list
        this.pagination.pageNumber = res.data.pagination.pageNumber
        this.pagination.total = res.data.pagination.total
        this.pagination.totalPages = res.data.pagination.totalPages
        console.log(res)
      } catch (error) {
        console.log(error)
      }
    },
    // 切换页码
    handleCurrentChange(val) {
      // 页码加一然后重新获取文章列表
      this.pagination.pageNumber = val
      this.getUserArticleList()
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  padding: 20px 0 20px 20px;
  background-color: #fff;
}
.content {
  height: 100px;
  background-color: #fff;
}
</style>
